<template>
  <div class="box">
    <!-- 返回 -->
    <div class="level" @click="goHome">
      <i class="el-icon-arrow-left"></i>
      <p>返回</p>
    </div>

    <!-- 介绍 -->
    <div class="introduce">
      <!-- <el-image
          class="one_image"
          :src="filesUrl + detailList.picture"
        ></el-image> -->
      <img class="one_image" :src="filesUrl + detailList.picture" />
      <div class="competition">
        <h4>{{ detailList.title }}</h4>
        <p>
          {{ detailList.blurb }}
        </p>
        <p>比赛时间：{{ detailList.startTime }} 到 {{ detailList.endTime }}</p>
        <p>主办方：{{ detailList.sponsor }}</p>
      </div>
      <div class="applicants">
        <p>奖池：{{ detailList.bonusText }}</p>
        <p>报名人数：{{ detailList.enrollNumber }}</p>
        <el-button type="primary" @click="goRegister" disabled
          >比赛结束</el-button
        >
      </div>
    </div>

    <!-- 比赛介绍 -->
    <div class="results">
      <ul>
        <li @click="showIndex = 1" :class="showIndex == 1 ? 'select' : ''">
          排行榜
        </li>
        <li @click="showIndex = 2" :class="showIndex == 2 ? 'select' : ''">
          成绩详情
        </li>
      </ul>
    </div>

    <!-- 排行榜 -->
    <div class="ranking_List" v-if="this.showIndex == 1">
      <div class="ranking">
        <img src="../assets/ranking.png" alt="" />
        <div>我的排名：第 <span>3</span>名</div>
      </div>
      <el-table :data="tableData" :stripe="true" border style="width: 100%">
        <el-table-column prop="date" label="排名"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="address" label="总分"> </el-table-column>
      </el-table>
    </div>

    <!-- 成绩详情 -->
    <div class="ranking_List" v-if="this.showIndex == 2">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="我的成绩"> </el-table-column>
        <el-table-column prop="name" label="我的排名"> </el-table-column>
        <el-table-column prop="address" label="评语"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  getContestInfo,
  getEnroll,
  getEnrollLogPage,
  getSubmitFile,
  getIsEnroll,
} from "../../api/index";
export default {
  data() {
    return {
      showIndex: 1,
      dialogVisible: false,
      dialogVisible1: false,
      showButton: null,
      detailList: {},
      cid: 1, //赛事id
      tableData: [],
      token: null,
      getShow: true,
      isSubmit: 0,
      showEnroll: false,
      showStatement: false,
      date: new Date().getTime(),
    };
  },
  methods: {
    // 返回上一级
    goHome() {
      this.$router.go(-1);
    },
    // 提交报名
    async submitRegister() {
      if (this.form.check == false) {
        this.$message("请勾选协议");
      } else {
        const res = await getEnroll({
          cid: this.cid,
          teamName: this.form.teamName,
          fullName: this.form.fullName,
          userEmail: this.form.userEmail,
          userMobile: this.form.userMobile,
          peopleNumber: this.form.peopleNumber,
        });
        if (res.code == 0) {
          this.dialogVisible1 = false;
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.getIsEnroll();
          this.$router.go(0);
        } else {
          this.dialogVisible1 = false;
          this.$message(res.msg);
        }
      }
    },
    // 获取详情数据
    async getContestInfo(id) {
      const res = await getContestInfo({ id: id });
      if (res.code == 0) {
        this.detailList = res.data;
        this.cid = res.data.id;
      } else {
        this.$message(res.msg);
      }
    },
    // 获取报名信息
    async getEnrollLogPage() {
      const res = await getEnrollLogPage({
        cid: this.cid,
      });
      if (res.code == 0) {
        this.showButton = res.data;
      }
    },
    // 提交并保存
    goSubmit() {
      this.showButton = !this.showButton;
    },
    // 打开报名弹框
    goRegister() {
      if (this.token == null) {
        this.$message("未登录");
        this.$store.commit("showLogin");
      } else {
        this.dialogVisible1 = true;
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 上传文件
    submit() {},
    // 上传成功
    async handleSuccess(file) {
      if (file.code == 200) {
        const res = await getSubmitFile({
          cid: this.cid,
          fileUrl: file.data.src,
        });
        if (res.code == 0) {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.getEnrollLogPage();
        } else {
          this.$message("提交失败");
        }
      }
    },
    init() {
      let token = localStorage.getItem("token");
      this.request_url = `${process.env.VUE_APP_BASE_API}/common/uploadFile?token=${token}`;
    },
    // 声明
    getStatement() {
      this.showStatement = !this.showStatement;
    },
    // 是否报名
    async getIsEnroll(id) {
      const res = await getIsEnroll({ cid: id });
      if (res.code == 0) {
        this.showEnroll = res.data;
      }
    },
  },
  computed: {},
  filters: {},
  watch: {},
  components: {},
  created() {
    this.init();
    const id = this.$route.query.id;
    this.getContestInfo(id);
    this.getIsEnroll(id);
    this.filesUrl = process.env.VUE_APP_FILE_URL;
    this.getEnrollLogPage();
    this.token = localStorage.getItem("token");
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss">
.box {
  width: 100%;
  height: 100vh;
  font-size: 0.9rem;
  box-sizing: border-box;
  .level {
    text-align: left;
    padding: 0 1.25rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;

    i {
      font-size: 1.125rem;
    }
  }

  .introduce {
    padding: 0.25rem 1.25rem 1.25rem 1.25rem;
    box-sizing: border-box;
    justify-content: space-between;
    .one_image {
      border-radius: 0.625rem;
    }
    .competition {
      text-align: left;
      margin: 0 1.25rem;
      h4 {
        margin: 0 0 0.625rem 0;
        font-size: 1.25rem;
      }
      p {
        margin: 0.625rem 0;
      }
    }
    .applicants {
      margin: 1.25rem 0 1.25rem 1.25rem;
      p {
        margin: 0.625rem 0;
        &:nth-child(1) {
          color: red;
        }
      }
    }
  }

  .results {
    ul {
      font-size: 1rem;
      padding: 1.25rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: center;
      li {
        padding: 0.625rem 1.875rem;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
  }

  .requirement {
    padding: 1.25rem;
    box-sizing: border-box;
    text-align: left;
    border-top: 1px solid #e3e3e3;
    h4 {
      margin: 1.25rem 0;
      font-size: 1.25rem;
    }
    p {
      margin: 0.625rem 0;
    }
    img {
      width: 30%;
    }
    table {
      border-collapse: collapse;
      margin: 15px 0;
    }
    table td,
    table th {
      border: 1px solid var(--w-e-textarea-border-color);
      line-height: 1.5;
      min-width: 30px;
      padding: 3px 5px;
      text-align: left;
    }
    table th {
      background-color: var(--w-e-textarea-slight-bg-color);
      font-weight: 700;
      text-align: center;
    }
  }
  .bottom {
    margin: 1.25rem 0;
    display: flex;
    align-items: center;
    p {
      margin-left: 0.625rem;
    }
    .bottom_span {
      color: #1890ff;
    }
  }
  .statement {
    text-align: left;
  }

  .button {
    display: flex;
    margin: 1.25rem 0;
    text-align: left;
  }

  .ranking_List {
    padding: 0 3.25rem;
    .ranking {
      width: 200px;
      margin: 1.25rem auto;
      margin-bottom: 1.25rem;
      padding: 1.25rem;
      background-color: #fff;
      box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.15);
      border-radius: 10px 10px 10px 10px;
      position: relative;
      img {
        position: absolute;
        top: 0;
        left: 0;
      }
      span {
        color: red;
      }
    }
  }

  .equal {
    margin: 1.25rem;
    text-align: left;
    h5 {
      font-size: 1.1875rem;
      margin: 1.25rem 0;
    }
    p {
      margin: 1.25rem 0;
    }
  }
}

.select {
  color: #1890ff;
  border-bottom: 0.125rem solid #1890ff;
}

@media screen and (min-width: 663px) {
  .box {
    padding: 0.25rem $overall-padding;
  }
}

@media screen and (min-width: 1001px) {
  .introduce {
    display: flex;
    .one_image {
      width: 30%;
    }
  }
  .box {
    padding: 0.25rem $overall-padding;
  }
}

@media screen and (max-width: 663px) {
  .box {
    padding: 0.25rem 1.25rem;
  }
  .introduce {
    display: block;
    .one_image {
      width: 100%;
    }
  }
}
</style>
